<template>
  <ezpage :title="shelfInfo.name">
    <view slot="contentSection" style="height: 100%;">
      <canvas id="myPoster" canvas-id="myPoster" type="2d"
        style="position: absolute;left:-350px;width:350px;height:750px;"></canvas>
      <ezshare v-if="showShareMenu" @selected="onShareSelected" @dismiss="onShareDismiss"></ezshare>
      <view style="justify-content: start;display: flex;flex-wrap: wrap;padding-bottom: 70px;">
        <view v-for="item in books" style="width:33.3%;padding:10px;margin-bottom: 10px;">
          <bookcell :data="item"></bookcell>
          <view v-if="isEditing" @click="btnDeleteBook" :data-id="item._id"
            style='font-size:10px;text-align:center;margin-top: 10px;'><text
              style="padding:5px 10px;background:#f3433e;color:#fff;border-radius:5px;">编辑</text></view>
        </view>
      </view>
    </view>
    <view v-if="shelfInfo.isowner" slot="tabSection" style="padding:10px;">
      <view v-if="!isEditing"
        style="background-color: #000;width: 100%;height: 50px;border-radius: 25px;display: flex;line-height: 50px;color:#fff;justify-content: space-between;">
        <view @click="showShareMenu= true" class="iconfont icon-share"
          style="width:50px;height: 50px;text-align: center;"></view>
        <view @click="btnScan" style="flex:1;text-align: center;">添加图书</view>
        <view @click="btnEnterEditing" class="iconfont icon-apps" style="width:50px;height: 50px;text-align: center;">
        </view>
      </view>
      <view v-else
        style="background-color: #000;width: 100%;height: 50px;border-radius: 25px;display: flex;line-height: 50px;color:#fff;justify-content: space-between;">
        <view></view>
        <view @click="btnExitEditing" style="flex:1;text-align: center;">退出编辑模式</view>
        <view></view>
      </view>
    </view>
  </ezpage>
</template>

<script>
  import cloudApi from "../../common/cloudApi.js"
  import ezpage from "../../components/ezpage.vue"
  import ezshare from "../../components/ezshare.vue"

  import bookcell from "../../components/dnms-ui/bookcell.vue"

  export default {
    components: {
      ezpage,
      bookcell,
      ezshare
    },
    data() {
      return {
        title: "",
        isEditing: false,
        shelfInfo: null,
        shelfid: null,
        canloadmore: true,
        showShareMenu: false,
        books: []
      }
    },
    onLoad(options) {
      this.shelfid = options.id;
      if (!this.shelfid) uni.navigateBack();

      this.getShelfInfo();
      this.requestBookList();
    },
    onReachBottom() {
      this.requestBookList(this.books[this.books.length - 1]._id);
    },
    onShareAppMessage() {
      return {
        title: this.title,
        path: '/pages/me/index?scene=sid=' + this.shelfInfo._id
      }
    },
    methods: {
      drawPoster() {
        uni.showLoading({
          title: "生成中",
          mask: true
        });
        const query = wx.createSelectorQuery()
        query.select('#myPoster')
          .fields({
            node: true,
            size: true
          })
          .exec(async (res) => {
            var canvas = res[0].node
            var ctx = canvas.getContext('2d')

            const dpr = uni.getSystemInfoSync().pixelRatio
            canvas.width = res[0].width * dpr
            canvas.height = res[0].height * dpr
            ctx.scale(dpr, dpr)

            ctx.fillStyle = "#ffffff";
            ctx.fillRect(0, 0, 350, 750);

            //ownerInfo
            ctx.fillStyle = 'black';
            ctx.fontSize = 16;
            ctx.fillText(this.shelfInfo.name, 70, 25);

            ctx.fontSize = 12
            ctx.fillText("馆主：" + this.shelfInfo.ownerinfo.nickName, 70, 44);

            ctx.fontSize = 12
            ctx.fillText("地址：" + this.shelfInfo.address, 70, 60);

            var image = canvas.createImage();
            image.onload = (res) => {
              ctx.drawImage(image, 10, 15, 50, 50);
            }
            image.src = this.shelfInfo.ownerinfo.avatarUrl;


            //books
            var bookLength = Math.min(this.books.length, 9);
            var bookIndex = 0;
            var loadNextBookCover = () => {
              var bookItem = this.books[bookIndex];

              uni.getImageInfo({
                src: bookItem.cover_url,
                success: (res) => {
                  var image = canvas.createImage();

                  image.onload = () => {
                    var dx = Math.floor(bookIndex % 3) * (100 + 15) + 10;
                    var dy = Math.floor(bookIndex / 3) * (150 + 15) + 80;
                    ctx.drawImage(image, dx, dy, 100, 150);

                    if (bookIndex < bookLength - 1) {
                      bookIndex++;
                      loadNextBookCover();
                    } else {
                      console.log("全部封面加载结束");
                      uni.hideLoading();

                      uni.canvasToTempFilePath({
                        canvas: canvas,
                        success: (res) => {
                          uni.previewImage({
                            current: res.tempFilePath,
                            urls: [res.tempFilePath, res.tempFilePath, res.tempFilePath]
                          })
                        },
                        fail: (err) => {
                          console.log(err);
                        }
                      })
                    }
                  }
                  image.src = res.path;
                }
              })
            }

            //wxacode
            const wxacodeRes = await cloudApi.call({
              name: "getwxacode",
              data: {
                scene: "sid=" + this.shelfInfo._id
              }
            });

            wx.getFileSystemManager().writeFileSync(
              `${wx.env.USER_DATA_PATH}/mpcode.jpg`,
              uni.arrayBufferToBase64(wxacodeRes.result.data),
              "base64"
            );
            uni.getImageInfo({
              src: `${wx.env.USER_DATA_PATH}/mpcode.jpg`,
              success: (res) => {
                var image = canvas.createImage();
                image.onload = (res) => {
                  ctx.drawImage(image, 350 - 170, 750 - 170, 160, 160);
                  loadNextBookCover();
                }
                image.src = res.path;
              }
            })
          })
      },
      onShareSelected(index) {
        if (index == 1) {
          this.drawPoster();
        }
      },
      onShareDismiss() {
        this.showShareMenu = false;
      },
      getShelfInfo() {
        cloudApi.call({
          name: "bookshelfs",
          data: {
            action: "get",
            _id: this.shelfid
          },
          success: (res) => {
            console.log(res.result);
            this.shelfInfo = res.result;
          }
        })
      },
      requestBookList(start = 0) {
        if (start && !this.canloadmore) return;
        cloudApi.call({
          name: "books",
          data: {
            action: "listbyshelf",
            shelfid: this.shelfid,
            start: start
          },
          success: (res) => {
            this.canloadmore = res.result.length >= 9;

            if (!start) this.books = res.result;
            else this.books = this.books.concat(res.result);
          }
        })
      },
      btnDeleteBook(e) {
        console.log(e.currentTarget.dataset.id);
        uni.showActionSheet({
          itemList: ["置顶", "删除"],
          success: (res) => {
            if (res.tapIndex == 0) {
              cloudApi.call({
                name: "books",
                data: {
                  action: "movetop",
                  bookid: e.currentTarget.dataset.id
                },
                success: (res) => {
                  this.requestBookList();
                }
              })
            } else if (res.tapIndex == 1) {
              cloudApi.call({
                name: "books",
                data: {
                  action: "delete",
                  shelfid: this.shelfid,
                  bookid: e.currentTarget.dataset.id
                },
                success: (res) => {
                  this.requestBookList();
                }
              })
            }
          }
        })
      },
      btnExitEditing() {
        this.isEditing = false;
      },
      btnEnterEditing() {
        this.isEditing = true;
      },
      btnScan() {
        uni.scanCode({
          success: async (res) => {
            const isbnres = await cloudApi.call({
              name: "ISBNQuery",
              data: {
                isbn: res.result
              }
            })
            await cloudApi.call({
              name: "books",
              data: {
                action: "add",
                shelfid: this.shelfid,
                isbnid: isbnres.result._id,
              }
            })

            this.requestBookList();
          }
        })
      }
    }
  }
</script>

<style>
  page {
    background-color: #fff;
  }
</style>
